<template>
  <div class="form-container bg-fff">
    <el-steps simple :active="0" finish-status="success">
      <el-step title="填写基本信息"></el-step>
      <el-step title="实名认证"></el-step>
      <el-step title="业务授权"></el-step>
      <el-step title="关联对公账户"></el-step>
      <el-step title="注册成功"></el-step>
    </el-steps>
    <el-form :model="form" ref="form" label-width="120px" label-position="right" :rules="rules">
      <el-form-item label="手机号码" prop="phone">
        <el-input class="line-input" maxlength="11" v-model="form.phone" placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item label="图形验证码" prop="picCode">
        <el-input class="line-input" maxlength="4" v-model="form.picCode" placeholder="请输入右侧图片中的文字">
          <v-valid-image-code v-model="form.picCodeKey" slot="suffix" class="edit-el-intput-suffix"></v-valid-image-code>
        </el-input>
      </el-form-item>
      <el-form-item label="手机验证码" prop="verificationCode">
        <el-input class="line-input" maxlength="6" v-model="form.verificationCode" placeholder="请输入手机验证码">
          <v-message-code slot="suffix" @click.native="getMessageCode" ref="messageCode" class="edit-el-intput-suffix"
                          :phoneNum="form.phone"></v-message-code>
        </el-input>
      </el-form-item>
      <el-form-item label="账号" prop="username">
        <el-input class="line-input" v-model="form.username" placeholder="请输入用户账号"></el-input>
      </el-form-item>
      <el-form-item label="联系邮箱" prop="email">
        <el-input class="line-input" v-model="form.email" placeholder="请输入联系邮箱"></el-input>
      </el-form-item>
      <el-form-item label="登录密码" prop="password">
        <el-input class="line-input" type="password" v-model="form.password" placeholder="请输入登录密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input class="line-input" type="password" v-model="form.confirmPassword"
                  placeholder="请再次输入登录密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="next">继续完成实名认证</el-checkbox>
      </el-form-item>
    </el-form>
    <div class="operation">
      <p>注册即同意 <em @click="agreeMent(true)">《票掌柜使用协议》</em><!-- 、<em @click="agreeMent(false)">《执剑人使用协议》</em> --></p>
      <v-pzg-agreement ref="pzg"/>
      <!-- <v-zjr-agreement ref="zjr"/> -->
      <el-button type="primary" plain @click="valid">同意协议并提交</el-button>
    </div>
  </div>
</template>
<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import vValidImageCode from '@/components/valid-image-code'
  import vMessageCode from '@/components/message-code'
  import md5 from 'md5'
  import vPzgAgreement from '../agreement/pzgAgree.vue'
  // import vZjrAgreement from '../agreement/zjrAgree.vue'

  @Component({
    components: {
      vValidImageCode,
      vMessageCode,
      vPzgAgreement,
      // vZjrAgreement
    }
  })
  export default class Step0 extends Vue {
    next = true
    form = {
      phone: '',
      username: '',
      password: '',
      confirmPassword: '',
      picCode: '',
      picCodeKey: '',
      verificationCode: '',
      recommendCode: '',
      email: ''
    }
    rules = {
      phone: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        {
          pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
          message: '手机号码错误',
          trigger: 'blur'
        }
      ],
      username: [
        { required: true, message: '请输入用户账号', trigger: 'blur' },
        { min: 6, message: '请输入至少6位的用户名', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入您的邮箱', trigger: 'blur' },
        {
          pattern: /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/,
          message: '您输入的邮箱有误',
          trigger: 'blur'
        }
      ],
      password: [
        { required: true, message: '请输入登录密码', trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, message: '请再次输入登录密码', trigger: 'blur' },
        { validator: this.testConfirmPassword, trigger: 'blur' }
      ],
      picCode: [
        { required: true, message: '请输入右侧图片中的文字', trigger: 'blur' }
      ],
      verificationCode: [
        { required: true, message: '请输入手机验证码', trigger: 'blur' }
      ]
    }

    testConfirmPassword (rule, value, cb) {
      if (this.form.password === '') {
        cb(new Error('请先输入密码'))
      } else {
        if (value === this.form.password) {
          cb()
        } else {
          cb(new Error('您两次输入的密码不一致,请重新输入'))
        }
      }
    }

    getMessageCode () {
      this.$refs.form.validateField('phone', phoneValid => {
        this.$refs.form.validateField('picCode', imageCodeValid => {
          if (!phoneValid && !imageCodeValid) {
            this.$refs.messageCode.start()
          }
        })
      })
    }

    agreeMent (mode) {
      if(mode){
        this.$refs.pzg.openDialog()
      }
    }

    valid () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.post(this.form)
        }
      })
    }

    async post (form) {
      form = {
        ...form,
        password: md5(form.password).toLocaleUpperCase(),
        confirmPassword: md5(form.confirmPassword).toLocaleUpperCase()
      }
      let res: AjaxResponse = await this.$axios.post('g/gateway/member/register', form)
      this.$utils.tips(res)
      if (res.responseCode === 200) {
        this.$router.push('/register/step-1')
        window.localStorage.setItem('invite', JSON.stringify(res.data))
      }
    }

    mounted () {
      this.form.recommendCode = this.$route.query.invite || this.$route.query.id
    }
  }
</script>
<style lang="less" scoped>
  .form-container {
    width: 1180px;
    margin: 0 auto;
    padding: 60px 0 30px;
  }

  .operation {
    text-align: center;
    font-size: 14px;
    color: #999;
    em {
      color: #409EFF;
      cursor: pointer;
    }
    .el-button {
      margin-top: 30px;
    }
  }

  .el-steps {
    margin-bottom: 60px;
  }
</style>
